<template>
	<view>
		<!-- tabs -->
		<view class="tabs">
			<view class="current-order" @click="tab = 'current-order'">
				<text :style="tab == 'current-order' ? 'color:#dba871;' : null">当前订单</text>
				<view class="bottom-line" v-if="tab == 'current-order'"></view>
			</view>
			<view class="old-order" @click="tab = 'old-order'">
				<text :style="tab == 'old-order' ? 'color:#dba871;' : null">历史订单</text>
				<view class="bottom-line" v-if="tab == 'old-order'"></view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="orders">
			<view class="order-item" @click="toPage('/pages/order/detail')">
				<view class="top">
					<view class="info">
						<h1 class="title">壹方城</h1>
						<text class="desc">2025-10-12 00:00:00</text>
					</view>
					<view class="status">
						已完成
					</view>
				</view>
				<view class="middle">
					<view class="imgs">
						<image src="https://placehold.co/50x50"></image>
						<image src="https://placehold.co/50x50"></image>
					</view>
					<view class="info">
						<text class="price">￥18</text>
						<text class="desc">共1件</text>
					</view>
				</view>
				<view class="bottom">
					<view class="opt-df" v-if="tab == 'current-order'">开发票</view>
					<view class="opt-new">再来一单</view>
				</view>
			</view>
			<view style="color: #adadad; font-size: 12px; text-align: center;">没有更多了</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab: 'current-order'
			}
		},
		methods: {
			toPage(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f6f6f6;
	}
</style>

<style scoped lang="less">
	.orders {
		.order-item {
			background-color: #fff;
			margin: 20rpx 0rpx;
			background-color: #fff;
			padding: 50rpx 20rpx;

			.bottom {
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-top: 30rpx;

				.opt-df {
					width: 150rpx;
					border-radius: 30rpx;
					margin: 0px 10rpx;
					height: 50rpx;
					line-height: 50rpx;
					background-color: #d7d7d7;
					padding: 6rpx 0rpx;
				}

				.opt-new {
					width: 150rpx;
					border-radius: 30rpx;
					color: #fff;
					height: 50rpx;
					line-height: 50rpx;
					background-color: #dba871;
					padding: 6rpx 0rpx;
				}
			}

			.middle {
				display: flex;
				justify-content: space-between;
				align-items: center;
				align-content: center;

				.imgs {
					display: flex;
					justify-content: flex-start;
					padding: 20rpx 0px;

					image {
						width: 100rpx;
						height: 100rpx;
						margin: 0px 0rpx;
						margin-right: 10rpx;
					}
				}

				.info {
					display: flex;
					flex-direction: column;
					align-items: flex-end;

					.price {
						font-size: 18px;
						// font-weight: 600;
						color: black;
					}

					.desc {
						font-size: 12px;
						color: #cacaca;
					}
				}
			}

			.top {
				display: flex;
				justify-content: space-between;

				.info {
					.title {
						font-size: 18px;
						font-weight: 600;
						color: black;
					}

					.desc {
						font-size: 15px;
						color: #cacaca;
					}
				}

				.status {
					font-size: 15px;
					color: #cacaca;
				}
			}
		}
	}

	.tabs {
		display: flex;
		justify-content: space-between;
		font-size: 18px;
		text-align: center;
		padding: 3rpx 0px;
		border-bottom: 1px #efefef solid;
		background-color: #fff;

		text {
			margin-top: 10rpx;
			display: inline-block;
		}

		.current-order {
			width: 50%;

			.bottom-line {
				text-align: center;
				width: 125rpx;
				height: 10rpx;
				background-color: #dcab77;
				margin: 0px auto;
				margin-top: 15rpx;
			}
		}

		.old-order {
			width: 50%;

			.bottom-line {
				text-align: center;
				width: 125rpx;
				height: 10rpx;
				background-color: #dcab77;
				margin: 0px auto;
				margin-top: 15rpx;
			}
		}
	}
</style>